<template>
	<view class="wrap">
		
		<view style="display: inline-flex;width: 100%;height: 90rpx;position: fixed;background-color: #FFFFFF;z-index: 999;margin-top: -30rpx;">
			<view style="width: 160rpx;height: 60rpx;margin-top: 22rpx;" @click="chooseLocation()">
				<u-icon label-size="32" label-pos="left" :label="Location.name" color="#B0B0B0" name="arrow-down-fill"
					size="14"></u-icon>
			</view>
			<view style="flex: 1;height: 50rpx;margin-top: 0rpx;">
				<u-tabs style="" :list="tablist" font-size="32" :is-scroll="false" :current="current" @change="change"
					height="90" active-color="#EA5344" :bar-width="140" :bold="false"></u-tabs>
			</view>
			<view style="width: 160rpx;height: 60rpx;margin-top: 29rpx;margin-right: 60rpx;" @click="gosearch">
				<u-icon style="float: right;" name="search" color="#EA5344" size="38"></u-icon>
			</view>
			
		</view>
		<view style="position: fixed;background-color: #FFFFFF;z-index: 999;top: 90rpx;width: 690rpx;">
			<u-line margin="-8rpx 0rpx"  />
		</view>
		<view v-show="isok" style="margin-top: 80rpx;">
			<view v-if="VideoList.length >0" class="index-Swiper">
				<u-swiper v-cloak :list="Hotlist" @change="SwiperChange" @click="govcinemas"></u-swiper>
			</view>

			<view v-if="VideoList.length >0 " class="index-list-1" v-for="(item,index) in VideoList" :key="index">
				<view style="display: inline-flex;height: 150rpx;width: 210;">
					<u-image v-cloak width="150rpx" height="210rpx" :src="item.smallPhoto" border-radius="7"
						@click="govideoinfo(item)">
					</u-image>
					<view style="display: block;width: 385rpx;height: 210rpx;margin-left: 15rpx;"
						@click="govcinema(item)">
						<view class="videoinfo" style="width: 400rpx;">
							<text class="index-name-1">{{item.name}}</text>
							<view v-if="item.type.split(',').length >1" class="index-name-4">
								<text class="index-name-2">
									{{item.type.split(',')[0]}} </text>
								<text class="index-name-3">
									{{item.type.split(',')[1]}} </text>
							</view>
						</view>
						<view v-if="item.grade>0" class="videoinfo">
							<text style="color:#82848A;">评分</text>
							<text class="index-grade-1">{{item.grade}}</text>
						</view>
						<view v-else class="videoinfo">
							<text style="color:#82848A;">暂无评分</text>
						</view>
						<view class="videoinfo">
							<text style="color:#82848A;">导演：{{item.director | formatA}}</text>
						</view>
						<view class="videoinfo" style="width:400rpx;">

							<text v-if="item.mainPerformer!=''"
								style="color:#82848A;">主演：{{item.mainPerformer | formatA}}</text>
							<text v-else style="color:#82848A;">暂无主演信息</text>
						</view>

					</view>
					<view v-if="item.filmStatus=='Y'">
						<u-button type="primary"  hover-class="none" v-cloak :custom-style="customStyle" @click="govcinema(item)">购票</u-button>
					</view>
					<view v-if="item.filmStatus=='N'">
						<u-button type="primary"  hover-class="none" v-cloak :custom-style="customStyle1" @click="govideoinfo(item)">预售</u-button>
					</view>
				</view>

				<u-line color="#787878" margin="20rpx 0rpx"></u-line>
			</view>
		</view>

		<view v-if="VideoList.length >0">
			<u-loadmore :status="status" />
		</view>
		<view v-if="nullshow" style="margin-top: 30rpx;">
			<u-empty icon-size="280" margin-top="200" font-size="30" text="暂无影片信息" src="/static/images/yy.png">
			</u-empty>
		</view>
		<u-toast ref="uToast" />
		
		<u-modal v-model="show" :show-cancel-button="true" @confirm="qhwz" @cancel="qxwz">
			<view class="slot-content">
				<rich-text :nodes="content"></rich-text>
			</view>
		</u-modal>
		<!-- <u-mask :show="show" @click="show = false">
			<view class="zzc">
				<view class="rect">
					<view class="">
						<text style="font-size: 38rpx;font-weight: 600;margin: 0 auto;">温馨提示</text>
					</view>
					<view style="margin-top: 30rpx;">
						<text style="font-size: 30rpx;font-weight: 500;margin: 0 auto;">系统定位您在 </text>
						<text style="font-size: 30rpx;font-weight: 500;margin: 0 auto;color: #EA5344;"> {{tmplocation.name}}</text>
						<text style="font-size: 30rpx;font-weight: 500;margin: 0 auto;">，是否切换？ </text>
					</view>
					<view style="display: flex;margin-top: 30rpx;align-items: center;justify-content: center;">
						<u-button hover-class="none" :custom-style="{'color':'#EA5344','width':'200rpx','height':'80rpx','margin-right':'20rpx'}" shape="circle" :plain="true" @click="qxwz">暂不切换</u-button>
						<u-button hover-class="none" :custom-style="{'color':'#FFFFFF','backgroundColor':'#EA5344','width':'200rpx','height':'80rpx','margin-left':'20rpx'}" shape="circle" @click="qhwz">立即切换</u-button>
					</view>
				</view>
				
			</view>
		</u-mask> -->
		<aui-loading ref="auiLoading" :type="auiLoading.type" :direction="auiLoading.row" :msg="auiLoading.msg"
			:mask="auiLoading.mask"></aui-loading>
	</view>
</template>

<script>
	import Config from '../../common/config.js'
	import {
		aui
	} from '@/components/aui-loading/common/aui/js/aui.js';
	import auiLoading from '@/components/aui-loading/aui-loading.vue';
	export default {
		components: {
			auiLoading
		},
		data() {
			return {
				nullshow: false,
				show: false,
				content: "",
				barStyle: {
					margin: "30rpx"
				},
				tmplocation: {
					name: "",
					cityId: 0
				},
				customStyle: {
					marginTop: '50%',
					color: '#FFFFFF',
					backgroundColor: '#EA5344',
					height: '60rpx'
				},
				customStyle1: {
					marginTop: '50%',
					color: '#FFFFFF',
					backgroundColor: '#40A9FF',
					height: '60rpx'
				},
				isok: false,
				showpage: false,
				auiLoading: {
					show: false,
					type: 3,
					direction: 'row',
					msg: '加载中',
					mask: true,
				},
				status: 'loadmore',
				page: 1,
				Location: Config.loaction,
				TmpName: "暂无影片",
				Hotlist: [],
				VideoList: [],
				current: 0,
				tablist: [{
					name: '今日热映'
				}, {
					name: '即将上映'
				}],
				allpage: 0
			}
		},
		onReady() {
			this.isok = true
		},
		onShow() {
			if (this.Location.cityId != Config.loaction.cityId) {
				this.Location = Config.loaction;
				this.latitude = Config.lat;
				this.longitude = Config.lon;
				this.page = 1
				this.VideoList = []
				this.Hotlist = []
				if (this.current == 0) {
					this.getVideoList('Y')
				} else {
					this.getVideoList('N')
				}
			}



		},
		onLoad() {
			this.$refs.auiLoading.show();
			//console.log(Config.loaction)
			this.getLocation();
			//Config.token ='d0f79725-64b6-4f56-8306-1ec584dfbacb'
		},
		onPullDownRefresh() {
			// this.getLocation();
			this.page = 1
			this.VideoList = []
			this.Hotlist = []
			if (this.current == 0) {
				this.getVideoList('Y')
			} else {
				this.getVideoList('N')
			}

		},
		onShareAppMessage: function(e) {
			let title = '梨客电影票'
			return {
				title: title,
				path: 'pages/index/index',
				success(res) {
					uni.showToast({
						title: '分享成功'
					})
				},
				fail(res) {
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					})
				}

			}
		},
		onShareTimeline(res) {
			let title = '梨客电影票'
			return {
				title: title
			}
		},

		onReachBottom() {
			if (this.page >= this.allpage) {
				this.status = 'nomore';

				return;
			}
			this.page = ++this.page;
			if (this.page == 1) {
				return;
			}
			this.status = 'loading';

			if (this.current == 0) {
				this.getVideoList('Y')
			} else {
				this.getVideoList('N')
			}
			this.status = 'loadmore';

		},
		filters: {
			formatT: function(value) {
				let T = value.split(' ')
				return T[0]
			},
			formatA: function(value) {
				let T = value.replace(/\//g, ' ')
				return T
			}
		},
		methods: {
			qhwz() {
				this.show=false
				this.cityId = this.tmplocation.cityId;
				Config.loaction = this.tmplocation;
				this.Location = this.tmplocation;
				Config.dwloaction = this.tmplocation;
				uni.setStorageSync('location',this.tmplocation)
				this.getVideoList('Y')
			},
			qxwz() {
				this.show=false
				this.getVideoList('Y')
			},
			govideoinfo(item) {
				Config.videoInfo = JSON.stringify(item)
				uni.navigateTo({
					url: "/pages/videoinfo/videoinfo"
				})
			},
			govcinemas(index) {
				Config.videoInfo = JSON.stringify(this.Hotlist[index])
				uni.navigateTo({
					url: "/pages/videoinfo/videoinfo"
				})
				// uni.navigateTo({
				// 	url: '/pages/videocinema/videocinema?name=' + this.Hotlist[index].name + '&filmId=' + this.Hotlist[index].filmId
				// });
			},
			govcinema(item) {

				if (item.filmStatus == 'Y') {
					uni.navigateTo({
						url: '/pages/videocinema/videocinema?name=' + item.name + '&filmId=' + item.filmId
					});
				} else {
					Config.videoInfo = JSON.stringify(item)
					uni.navigateTo({
						url: "/pages/videoinfo/videoinfo"
					})
				}

			},
			gosearch() {
				uni.navigateTo({
					url: '/pages/search/search?type=video'
				});
			},
			chooseLocation() {
				uni.navigateTo({
					url: '/pages/location/location'
				});
			},
			getCityInfo(location) {
				let that = this;
				uni.request({
					url: "https://restapi.amap.com/v3/geocode/regeo",
					data: {
						key: "669ef225c5dd9ad11f7ab2d6f9c7e7b5",
						location: location
					},
					success: (res) => {

						let city = res.data.regeocode.addressComponent.city;
						if (city.toString() === '') {
							city = res.data.regeocode.addressComponent.province
						}

						city = city.replace('市', "")
						for (var i = 0; i < Config.data.length; i++) {
							for (var j = 0; j < Config.data[i].data.length; j++) {

								if (Config.data[i].data[j].name.indexOf(city) > -1) {
									let a = {
										name: city,
										cityId: Config.data[i].data[j].cityId
									}
									if (Config.loaction.name === "暂无" || Config.loaction.name === undefined) {
										Config.loaction = a;
										that.Location = a;
										uni.setStorageSync("location", a)
									} else {

										if (Config.loaction.cityId != a.cityId) {

											let time1 = uni.getStorageSync('starttime')
											let time2 = Date.parse(new Date())
											let t3 = time2 - parseInt(time1)
											console.log(1800000)
											if (t3>180){
												uni.setStorageSync("starttime", time2)
												that.tmplocation = a
												that.dwloaction = a
												that.content = `检测到您当前的位置是【` + a.name + `】<br>
												是否需要切换？`
												that.show = true
											} else {

												uni.setStorageSync("starttime", time2)
												//this.getVideoList('Y')
											}

										} else {
											that.cityId = Config.loaction.cityId;
											Config.dwloaction = a;

										}
									}
									that.getVideoList('Y')
									return
								}
							}
						}
					},
					fail() {
						uni.showToast({

						})
					}
				})
			},
			pageTotal(rowCount, pageSize) {
				if (rowCount == null || rowCount == "") {
					return 0;
				} else {
					if (pageSize != 0 && rowCount % pageSize == 0) {
						return parseInt(rowCount / pageSize)
					}
					if (pageSize != 0 && rowCount % pageSize != 0) {
						return parseInt(rowCount / pageSize) + 1;
					}
				}
			},
			getVideoList(status) {

				let that = this;
				that.$refs.auiLoading.show();
				let cityid = that.Location.cityId;
				if (status == "N") {
					cityid = ""
				}

				uni.request({
					url: Config.ServerIP + '/movie/app/movie/filmShow/list', //仅为示例，并非真实接口地址。
					method: "POST",
					data: {
						cityId: cityid,
						direction: 'asc',
						filmStatus: status,
						pageNum: that.page,
						pageSize: 10

					},
					success: (res) => {
						if (res.data.code != 200) {

							that.$refs.uToast.show({
								title: '获取信息错误',
								type: 'error'
							})
							return
						}
						if (that.page == 1 && res.data.data.length == 0) {
							that.nullshow = true
						} else {
							that.nullshow = false
						}
						that.allpage = that.pageTotal(res.data.total, 10);
						let a = that.VideoList
						let b = res.data.data
						that.VideoList = a.concat(b)
						if (that.Hotlist.length <= 0) {
							if (res.data.data.length > 0) {
								if (res.data.data.length >= 3) {
									for (var i = 0; i < 3; i++) {
										res.data.data[i].title = res.data.data[i].name;
										if (status == "N") {
											res.data.data[i].image = res.data.data[i].smallPhoto;
										} else {
											res.data.data[i].image = res.data.data[i].longPhoto;
										}

										that.Hotlist.push(res.data.data[i])
									}
								} else {
									for (var i = 0; i < res.data.data.length; i++) {
										res.data.data[i].title = res.data.data[i].name;
										if (status == "N") {
											res.data.data[i].image = res.data.data[i].smallPhoto;
										} else {
											res.data.data[i].image = res.data.data[i].longPhoto;
										}

										that.Hotlist.push(res.data.data[i])
									}
								}
							} else {

							}
						}
						that.$refs.auiLoading.hide();
					},
					complete() {
						uni.stopPullDownRefresh()
						that.$refs.auiLoading.hide();
					}

				});

			},
			getLocation() {
				let that = this;
				if (Config.loaction.lat > 0) {
					return
				}
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						Config.lat = res.latitude;
						Config.lon = res.longitude;
						that.getCityInfo(res.longitude + "," + res.latitude)

					},
					fail(ress) {
						wx.getSetting({
							success: (res) => {
								// console.log(res.authSetting);
								//已授权就是true
								if (res.authSetting['scope.userLocation']) {
									this.getUserPosition((res, flag) => {
										// console.log(res, flag);
										if (flag.flag) {
											fn(res)
										}
									});
								} else {
									//如果未授权  打开弹窗
									wx.showModal({
										title: '请授权位置权限',
										showCancel: false,
										cancelColor: 'cancelColor',
										success: () => {
											wx.openSetting({
												complete: (res) => {
													uni.navigateTo({

														url: '/pages/location/location'

													});
												},
											})
										}
									})
								}
							}
						})
					}
				});


			},
			change(index) {
				this.current = index;
				this.page = 1
				this.VideoList = []
				this.Hotlist = []
				if (index == 0) {
					this.getVideoList('Y')
				} else {
					this.getVideoList('N')
				}
			},
			SwiperChange(index) {

			}
		}
	}
</script>

<style scoped lang="scss">
	

	@import url("@/static/css/index.css");
	.slot-content {
			text-align: center;
			font-size: 28rpx;
			color: $u-content-color;
			padding-left: 30rpx;
			line-height: 40rpx;
		}

	.videoinfo {
		width: 390rpx;
		// display: -webkit-box;
		margin-bottom: 15rpx;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		/* display: -webkit-box; */
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		flex-wrap: nowrap;
		word-break: break-all;
	}

	.wrap {
		padding: 30rpx;
	}

	.zzc {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.rect {
		width: 550rpx;
		height: 300rpx;
		background-color: #fff;
		align-items: center;
		border-radius: 20rpx;
		padding: 30rpx;
		text-align: center;
		letter-spacing: 2px;
	}
	
</style>
